<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :footer="null"
      :maskClosable="true"
      :closable="false"
      width="846px"
      wrapClassName="preview-modal-container"
      @cancel="closeModal()"
    >
      <img :src="imgUrl" alt="" srcset="" />
    </a-modal>
  </div>
</template>

<script>
export default {
  props: ["visible", "imgUrl"],
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
        }
      },
      immediate: true,
    },
  },
  methods: {
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.preview-modal-container {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ant-modal-body {
    padding: 0;
  }
}
</style>
